<script setup>
import { ref, onMounted } from 'vue';
import { getFriendList } from '@/api/friends';
// -----------------------------------变量-------------------------------
// 定义一个mes存放请求回来的数据
const mes2 = ref([])


// 定义一个变量用于列表的显示
const show = ref(true)
// 定义一个变量用于资料的显示
const showIfo = ref(false)
// 搜索绑定的
const value = ref('');
// 定义一个变量存储搜索的数据
const searchMes = ref([])
// 定义一个资料卡显示的名字和照片
const showPerson = ref('')
const indexList = ['A','B','C','D','E','F','G','H','I','J','K','L','M','O','P','Q','R','S','T','U','V','W','X','Y','Z']

// --------------------------------生命周期执行---------------------------
// 消息搜索功能实现
function onSearch() {

    console.log(value.value);

    // 不再展示消息列表，展示一个下拉的菜单
    show.value = false
    // 变量存储搜索的数据
    searchMes.value = mes2.value.filter(item => {
        return item.name === value.value

    })
    console.log('搜索的数据', searchMes.value);
}
// 资料卡点击实现
function onShowIfo(id) {
    // 资料卡的显示状态
    showIfo.value = !showIfo.value
    console.log('传入的id', id);
    // 根据id筛选对应的数据
    showPerson.value = mes2.value.filter(item => {
        return item.id == id
    })
    console.log('触发的名字showPerson', showPerson.value);

}
onMounted(() => {

})
console.log('外面打印触发的名字showPerson', showPerson.value);


// ---------------------------请求发送----------------------------------------
// 发送消息请求
getFriendList().then(res => {
    mes2.value = res.data.message
    // console.log(mes2.value);
})



</script>

<template>
    <div class="box">
        <!-- 1.表单组件————搜索  点击键盘上的搜索/回车按钮后触发-->
        <van-search @search="onSearch" v-model="value" input-align="left" shape="round" placeholder="搜索好友" />

        <div class="content ">
            <!-- <van-index-bar :sticky="false">
                <van-index-anchor index="A" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />

                <van-index-anchor index="B" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />

                <van-index-anchor index="C" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="D" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="E" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="F" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="G" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-index-anchor index="I" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
            </van-index-bar> -->
            <van-index-bar :sticky="false" v-for="(item,index) of indexList">
                <van-index-anchor  index="A"/>
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
            </van-index-bar>
        </div>


    </div>
</template>


<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.van-search {
    margin-bottom: 10px;
    width: 94%;
    margin: 0 auto;
}

.van-tabs {
    width: 204px;

}

.van-tag {
    display: flex;

    .text {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }


}

.active {
    font-size: 50px;
}

.van-tag--large {
    margin: 0 auto;
    width: 336px;
    height: 60px;
    color: black;
    background-color: #FFF;
    border-bottom: 1px solid rgb(248, 239, 239);
}

.box {
    flex: 1;
    display: flex;
    height: 300px;
    overflow: auto;
    position: relative;

    .content {
        flex: 1;
    }

    .van-card {
        width: 100%;
        color: black;
        font-size: 20px;


    }

    .desc {
        position: absolute;
        // background-color: red;
        bottom: 50px;
        left: 113px;
        color: pink;
    }
}

.footer {
    background-color: azure;
}
</style>